package com.lzgcoding.onlineshopapp.feature.main.dashboard.component

import androidx.compose.foundation.Image
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.size
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.material3.OutlinedIconButton
import androidx.compose.material3.OutlinedTextField
import androidx.compose.runtime.Composable
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.res.painterResource
import androidx.compose.ui.unit.dp
import com.lzgcoding.onlineshopapp.R
import com.lzgcoding.onlineshopapp.ui.theme.LargePadding
import com.lzgcoding.onlineshopapp.ui.theme.MediumPadding

@Composable
fun SearchField(
    modifier: Modifier = Modifier,
    value: String,
    onValueChange: (String) -> Unit
) {
    Row(
        modifier = modifier,
        verticalAlignment = Alignment.CenterVertically,
        horizontalArrangement = Arrangement.spacedBy(MediumPadding)
    ) {
        OutlinedTextField(
            modifier = Modifier
                .weight(1f)
                .height(56.dp),
            value = value,
            onValueChange = onValueChange,
            shape = RoundedCornerShape(MediumPadding),
            leadingIcon = {
                Image(
                    painter = painterResource(R.drawable.search_icon),
                    contentDescription = "search_icon"
                )
            },
            trailingIcon = {
                Image(
                    painter = painterResource(R.drawable.microphone),
                    contentDescription = "microphone_icon"
                )
            }
        )

        OutlinedIconButton(
            onClick = {},
            modifier = Modifier.size(56.dp),
            shape = RoundedCornerShape(MediumPadding)
        ) {
            Image(
                painter = painterResource(R.drawable.settings),
                contentDescription = "setting_icon",
                modifier = Modifier.padding(LargePadding)
            )
        }
    }
}